<template>
  <!-- 订单详情页 -->
  <div>
    <el-row>
      <router-link to="/admin/order/List" class="return_text">返回</router-link>
    </el-row>
    <el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          label="订单编号"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="productId"
          label="产品编号"
          width="180"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="product.name"
          label="产品"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="product.photo"
          label="产品图片"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <el-popover placement="right" trigger="hover">
              <el-image
                class="img__hoverImg"
                fit="contain"
                :src="scope.row.product.photo"
              />
              <el-image
                slot="reference"
                class="img__innerImg"
                fit="contain"
                :src="scope.row.product.photo"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="product.price"
          label="单价"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <span>￥</span
            ><span style="color: #e65d6e; font-size: 18px">{{
              scope.row.product.price
            }}</span>
            <span>元</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          align="center"
          header-align="center"
        />
      </el-table>
    </el-row>

    <!-- 弹性布局 -->
    <div :class="totalData.employee !== null ? 'flexCard' : 'floatCard'">
      <!-- 第一张卡片 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单基本信息</span>
        </div>
        <div class="text item">订单编号：{{ totalData.id }}</div>
        <div class="text item">
          订单金额：<span>￥</span
          ><span style="color: #e65d6e; font-size: 18px">{{
            totalData.total
          }}</span>
          <span>元</span>
        </div>
        <div class="text item">
          下单时间：{{ totalData.orderTime | fmtDateDay }}
        </div>
        <div class="text item">订单状态：{{ totalData.status }}</div>
      </el-card>
      <!-- 第二张卡片 -->
      <el-card v-if="totalData.employee !== null" class="box-card">
        <div slot="header" class="clearfix">
          <span>接单者信息</span>
        </div>
        <div class="text item">接单者：{{ totalData.employee.username }}</div>
        <div class="text item">
          接单者手机号：{{ totalData.employee.telephone }}
        </div>
      </el-card>
      <!-- 第三张卡片 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>下单者信息</span>
        </div>
        <div class="text item">下单者：{{ totalData.customer.realname }}</div>
        <div class="text item">
          下单者手机号：{{ totalData.customer.telephone }}
        </div>
      </el-card>
      <!-- 第四张卡片 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>雇主信息</span>
        </div>
        <div class="text item">雇主：{{ totalData.address.username }}</div>
        <div class="text item">
          雇主手机号：{{ totalData.address.telephone }}
        </div>
        <div class="text item">
          服务地址：{{ totalData.address.city }}{{ totalData.address.area
          }}{{ totalData.address.address }}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { findById } from "@/api/order";
import { fmtDateDay } from "@/filters/index";
export default {
  data() {
    return {
      // 时间格式
      fmtDateDay,
      // 表格数据
      tableData: [],
      // 订单ID
      id: null,
      // 后台总体返回数据
      totalData: [],
    };
  },
  computed: {},
  created() {
    this.id = this.$route.query.index;
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await findById({ id: this.id });
      if (res.status !== 200) return this.$message.error("数据获取失败");
      // console.log(res)
      this.totalData = res.data;
      this.tableData = res.data.orderLines;
    },
  },
};
</script>
<style scoped lang="scss">
.return_text {
  color: #99cccc;
  font-size: 14px;
}
.img__innerImg {
  width: 50px;
  height: 40px;
}
.img__hoverImg {
  width: 180px;
  height: 120px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 304px;
}
.flexCard {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.floatCard {
  .el-card {
    float: left;
    margin-right: 25px;
  }
}
</style>
